<template>
  <div>
    <van-nav-bar title="人生如寄" />

    <!-- 整体表单组件 -->
    <!-- submit  提交表单且验证通过后触发 -->
    <van-form @submit="onSubmit">
      <van-field v-model="user.mobile" required name="mobile" label="手机号" placeholder="请输入11位的手机号" :rules="[{ required: true, message: '请输入正确的手机号', pattern: /^1[3-9]\d{9}$/ }]" />
      <van-field v-model="user.code" required type="password" name="code" label="密码" placeholder="请输入6位密码" :rules="[{ required: true, message: '请填写正确的密码', pattern: /^\d{6}$/ }]" />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit" :disabled="isLoading" :loading="isLoading" loading-text="正在登录ing····">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { loginAPI } from '@/api'
import Notify from '@/ui/Notify.js'
import { setToken } from '../../utils/token.js'
import { setStorage } from '@/utils/storage.js'

export default {
  data() {
    return {
      user: {
        mobile: '13888888888', // 手机号
        code: '246810' // 验证码
      },
      isLoading: false // 登录按钮的加载状态
    }
  },
  methods: {
    async onSubmit(values) {
      console.log('submit', values)
      console.log(this.user)

      this.isLoading = true

      try {
        const res = await loginAPI(this.user) // eslint-disable-line no-unused-vars
        Notify({ type: 'success', message: '人生忽如寄,莫辜负茶,汤和好天气' })
        setToken(res.data.data.token)
        setStorage('refresh_token', res.data.data.refresh_token)
        // location.href->当前浏览器和要跳转的地址一样（不包含#后面锚点信息）->不会刷新网页
        // this.$router.push()压栈（会产生历史记录，可以回退），this.$router.reple()不会产生历史记录
        this.$router.replace({
          path: this.$route.query.path || '/layout/home'
        })
      } catch (error) {
        Notify({ type: 'danger', message: '账号或密码错误' })
      }
      this.isLoading = false
    }
  }
}
</script>

<style lang="less" scoped>
//此类名是van-nav-bar组件内根标签
// .van-nav-bar{
//   background-color: #57c3c2;
// }
// 此选择器名字是van-nav-bar组件内标签，scoped尝试把此选择器后数学家选择器匹配当前页面标签（选不中组件内部的）
//lang="less" 当前style标签内是less语法，用 /deep/ 就不会被vscode标记红线
// /deep/ 会把属性选择器加到前面（用后代选择器的方式往里找匹配的类名）
// /deep/ .van-nav-bar__title{
// 	color: white;
// }
</style>
